import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom'
import {BillStyled } from './BillStyled'

import Navigation from 'components/Navigation/Navigation'
import TitleBar from 'pages/hall/component/Titlebar'
import Button from 'components/UIButton/UIButton'

import Income from './Income'
import Expenditure from './Expenditure'

import back from 'images/nav/whiteback@3x.png'
const barArr = [
  {
  title : "收入",
  routePath : "/myChildRouter/bill/income",
  component : Income,
  tag : 0,
},
{
  title : "支出",
  routePath : "/myChildRouter/bill/expenditure",
  component : Expenditure,
  tag : 1,
},]
let selBill = 0
class Bill extends Component {
  render() {
    barArr.forEach((value,index)=>{
      console.log(value,index);
      
      if(value.routePath === this.props.location.pathname){
        selBill  = value.tag
      }
    })
    return (
      <div style={{width:'100%',height:'100%'}}>
        
        <Navigation
        title = "账单明细"
        leftMargin = '0 0 0 .15rem'
        leftWidth = '25%'
        leftHeight = '.44rem'
        leftImg = {back}
        leftImgWidth = '.2rem'
        clickLeft = {()=>this.onClickLeft("left")}
        ></Navigation>

        <TitleBar
        barArr = {barArr}
        taskIndex = {selBill}
        titleBorderWidth='0 0 5px 0'
        titleWidth = '.61rem'
        titleHeigh= '.48rem'
        selectedTitleBorderColor='#56D9D1'
        titleColor = '#646464'
        titleSize = '.13rem'
        ></TitleBar>

        <Switch>
          {
            barArr.map((value,index)=>(
              <Route key={index} path={value.routePath} component={value.component}></Route>
            ))
          }
          <Redirect from="/myChildRouter/bill" to={barArr[selBill?selBill:0].routePath} exact></Redirect>
          {/* <Route component={Page404}></Route> */}
        </Switch>

      </div>
    );
  }
  onClickLeft(tag){
    this.props.history.go(-1)

  }
}

export default Bill;